<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <template #header>
          <span v-text="$route.query.id ? '试题编辑' : '试题录入'"></span>
        </template>
        <!-- form表单 -->
        <el-form ref="form" :model="form" label-width="100px" :rules="rules">
          <el-form-item label="学科:" prop="subjectID">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              style="width: 420px"
              @change="selectSubject"
            >
              <el-option
                :label="subject.subjectName"
                :value="Number(subject.id)"
                v-for="subject in subjectList"
                :key="subject.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select
              v-model="form.catalogID"
              placeholder="请选择"
              style="width: 420px"
            >
              <el-option
                :label="catalog.directoryName"
                :value="catalog.id"
                v-for="catalog in catalogList"
                :key="catalog.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select
              v-model="form.enterpriseID"
              placeholder="请选择"
              style="width: 420px"
            >
              <el-option
                :label="comp.company"
                :value="comp.id"
                v-for="comp in compnayList"
                :key="comp.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 城市 -->
          <div style="height: 58px">
            <el-form-item
              label="城市:"
              style="width: 300px; float: left"
              prop="province"
            >
              <el-select
                v-model="form.province"
                placeholder="请选择"
                style="width: 200px"
                @change="selectprovice"
              >
                <el-option
                  :label="value"
                  :value="value"
                  v-for="(value, index) in provices"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label=""
              style="width: 200px; float: left; margin-left: 20px"
              label-width="0"
              prop="city"
            >
              <el-select
                v-model="form.city"
                placeholder="请选择"
                style="width: 200px"
              >
                <el-option
                  :label="value"
                  :value="value"
                  v-for="(value, index) in cityslist"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>

          <el-form-item label="方向:" prop="direction">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              style="width: 420px"
            >
              <el-option
                :label="value"
                :value="value"
                v-for="(value, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="题型:" size="normal" prop="questionType">
            <el-radio-group v-model="form.questionType">
              <el-radio label="1">单选</el-radio>
              <el-radio label="2">多选</el-radio>
              <el-radio label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:" size="normal" prop="difficulty">
            <el-radio-group v-model="form.difficulty">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="题干:" size="normal" prop="question">
            <ElTextarea v-model.lazy="form.question" />
          </el-form-item>

          <!-- 选项 -->
          <!-- 单选 -->
          <el-form-item
            label="选项:"
            size="normal"
            v-if="form.questionType === '1'"
          >
            <el-radio-group
              v-model="singleRight"
              @change="selectanswer"
              style="display: block"
            >
              <single-selection
                :option="String.fromCharCode(65 + index)"
                v-model="opt.title"
                v-for="(opt, index) in form.options"
                :key="index"
              />
            </el-radio-group>

            <el-button type="danger" size="small" disabled
              >+增加选项与答案</el-button
            >
          </el-form-item>
          <!-- 多选 -->
          <el-form-item
            label="选项:"
            size="normal"
            v-if="form.questionType === '2'"
          >
            <el-checkbox-group v-model="mutiopt" @change="selectmultiopt">
              <MultiSelection
                v-model="value.title"
                v-for="(value, index) in form.options"
                :key="index"
                :option="value.code"
              />
            </el-checkbox-group>
            <el-button type="danger" size="small" @click="addmultiopt">
              +增加选项与答案
            </el-button>
          </el-form-item>
          <el-form-item label="解析视频:" size="normal">
            <el-input v-model="form.videoURL" style="width: 420px"></el-input
          ></el-form-item>
          <el-form-item label="答案解析:" size="normal" prop="answer">
            <ElTextarea v-model.lazy="form.answer" />
          </el-form-item>

          <el-form-item label="题目备注">
            <el-input
              type="textarea"
              v-model="form.remarks"
              style="width: 420px"
              rows="4"
            ></el-input>
          </el-form-item>
          <el-form-item label="试题标签:" style="width: 420px" required>
            <el-select
              v-model="form.tags"
              placeholder="请选择"
              style="width: 420px"
            >
              <el-option
                :label="tag.tagName"
                :value="tag.tagName"
                v-for="tag in tagList"
                :key="tag.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import SingleSelection from './components/single-selection.vue'
import MultiSelection from './components/multi-selection.vue'
import ElTextarea from './components/el-textarea.vue'
import { provinces, citys } from '@/api/hmmm/citys'
import * as subject from '@/api/hmmm/subjects'
import * as catalog from '@/api/hmmm/directorys'
import * as company from '@/api/hmmm/companys'
import * as tag from '@/api/hmmm/tags'
import { direction } from '@/api/hmmm/constants'
import { add, detail, update } from '@/api/hmmm/questions'

export default {
  components: {
    ElTextarea,
    SingleSelection,
    MultiSelection
  },
  data () {
    return {
      asciiiCode: '',
      // 多选答案
      mutiopt: [],
      // 单选答案
      singleRight: '',
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        options: [
        ],

        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''

      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科' }
        ],
        catalogID: [
          { required: true, message: '请选择目录' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业' }
        ],
        city: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向' }
        ],
        questionType: [
          { required: true, message: '请选择题型' }
        ],
        difficulty: [
          { required: true, message: '请选择难度' }
        ],
        question: [
          { required: true, message: '请输入题干' }
        ],
        answer: [
          { required: true, message: '请输入答案' }
        ]
      },
      subjectList: [],
      catalogList: [],
      compnayList: [],
      provices: [],
      cityslist: [],
      direction,
      tagList: []
    }
  },
  created () {
    this.getAllList()
    this.optionInit()
    this.editquestion()
  },
  watch: {
    // 'form.questionType' (newValue, oldValue) {
    //   this.optionInit()
    // }
  },
  methods: {
    // 数据回显
    async editquestion () {
      if (this.$route.query.id) {
        try {
          const { data } = await detail({ id: this.$route.query.id })
          this.form = data
          data.options.forEach(item => {
            if (item.isRight) {
              this.singleRight = item.code
            }
          })
          const cata = await catalog.list({
            page: 1,
            pagesize: 99999,
            subjectID: this.form.subjectID
          })
          this.catalogList = cata.data.items
          console.log(this.catalogList)
          console.log(data)
        } catch (error) {
          console.log(error)
        }
      }
    },
    // 点击添加选项
    addmultiopt () {
      console.log('添加多选')
      this.asciiiCode = +this.asciiiCode + 1
      this.form.options.push({
        code: String.fromCharCode(this.asciiiCode),
        title: '',
        img: '',
        isRight: '0'
      })
    },
    // 多选按钮改变时
    selectmultiopt () {
      this.form.options.forEach(item => {
        item.isRight = false
        if (this.mutiopt.includes(item.code)) {
          item.isRight = true
        }
      })
    },
    // 单选按钮改变
    selectanswer () {
      this.form.options.forEach(item => {
        item.isRight = false
      })
      this.form.options[this.singleRight.charCodeAt() - 65].isRight = true
      console.log(this.singleRight.charCodeAt() - 65)
    },
    // 选项初始化
    optionInit () {
      for (let i = 0; i < 4; i++) {
        this.form.options.push({
          code: String.fromCharCode(65 + i),
          title: '',
          img: '',
          isRight: '0'
        })
        this.asciiiCode = 65 + i
      }
    },
    // 选择省份
    selectprovice () {
      this.form.city = ''
      this.cityslist = citys(this.form.province)
      console.log(this.cityslist)
      this.$refs.form.validateField('city', () => {
        console.log('校验city')
      })
    },
    citys,
    // 提交
    async onSubmit () {
      console.log('submit!')
      try {
        await this.$refs.form.validate()
        if (this.$route.query.id) {
          this.form.id = Number(this.$route.query.id)
          await update(this.form)
          this.$message.success('修改成功')
        } else {
          const map = {}
          for (const key in this.form) {
            if (this.form[key]) {
              map[key] = this.form[key]
            }
          }
          await add(map)
          this.$message.success('添加成功')
        }

        await this.$refs.form.resetFields()
        this.form = {
          subjectID: '',
          catalogID: '',
          enterpriseID: '',
          province: '',
          city: '',
          direction: '',
          questionType: '1',
          difficulty: '1',
          question: '',
          options: [
          ],

          videoURL: '',
          answer: '',
          remarks: '',
          tags: ''

        }
        this.optionInit()
        this.form.question = ''
      } catch (error) {
        console.log(error)
      }
    },
    // 选取学科后执行
    selectSubject () {
      this.getAllList()
    },
    // 获取选择框数据
    async getAllList () {
      // 获取学科
      const { data: { items } } = await subject.list({
        page: 1,
        pagesize: 99999
      })
      this.subjectList = items
      // 获取目录
      const cata = await catalog.list({
        page: 1,
        pagesize: 99999,
        subjectID: this.form.subjectID
      })
      this.catalogList = cata.data.items
      // 获取公司
      const comp = await company.list({
        page: 1,
        pagesize: 99999,
        state: 1
      })
      this.compnayList = comp.data.items
      this.provices = provinces()
      // 获取标签
      const tagg = await tag.list({
        page: 1,
        pagesize: 99999,
        subjectID: this.form.subjectID
      })
      this.tagList = tagg.data.items
      console.log(tagg.data.items)
    }
  }
}
</script>

<style scoped lang="scss">
</style>
